<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员管理</title>\
    <style>
        .layui-table-cell{
            display:table-cell;
            vertical-align: middle;
        }
    </style>

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script>
    layui.use("table",function () {
        var table = layui.table;
        table.render({
            id:"admin",
            elem:"#demo",
            cols:[[
                {field:"adminId",title:"编号",sort:true},
                {field:"username",title:"管理员姓名"},
                {field:"roles",title:"角色",templet:function (d) {
                    var str = "";
                        for (var i=0;i<d.roles.length;i++){
                            str+=d.roles[i].roleName+"<br>";
                        }
                        return str;
                    }
                },
                {title:"操作",
                    toolbar:"#operation"
                }
            ]],
            url:"${pageContext.request.contextPath}/admin/showAdmin",

            toolbar:"#toolbar"
        });
    })
</script>
<script type="text/html" id="operation">
    <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</button>
    <button class="layui-btn layui-btn-warm layui-btn-sm" lay-event="edit">更新</button>
</script>
<script type="text/html" id="img">
    <img src="${pageContext.request.contextPath}{{= d.imageUrl }}" alt="{{= d.imageUrl }}">
</script>


<script type="text/html" id="toolbar">
    <button class="layui-btn layui-btn-danger layui-btn-sm" onclick="handleRemoveAny()">
        <i class="layui-icon layui-icon-delete">批量删除</i>
    </button>
    <button class="layui-btn  layui-btn-sm" onclick="handleOpenAdd()" >
        <i class="layui-icon layui-icon-addition">添加</i>
    </button>
</script>

<div id="addForm" style="display:none">
    <form class="layui-form" action="" id="add" lay-filter="add">
        <div class="layui-form-item">
            <label class="layui-form-label">图片名称</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="oldName" lay-verify="required" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上传时间</label>
            <div class="layui-input-inline">
                <input type="date" class="layui-input" name="date" lay-verify="date" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图片描述</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="description" lay-verify="required" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图片</label>
            <div class="layui-input-inline">
                <button type="button" class="layui-btn" id="uploadImg">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
                <input type="hidden" class="layui-input" name="imageUrl" id="imageUrl" lay-verify="required" >
                <span id="fileName"></span>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="add">提交</button>
                <button type="reset" class="layui-btn" >重置</button>
            </div>
        </div>
    </form>
</div>
<div id="updateForm" style="display:none">
    <form class="layui-form" action="" id="update" lay-filter="update">
        <div class="layui-form-item">
            <label class="layui-form-label">歌曲名称</label>
            <div class="layui-input-inline">
                <input type="hidden" class="layui-input" name="id">
                <input type="text" class="layui-input" name="name">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">发行时间</label>
            <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
                <input type="text" class="layui-input" id="date" name="publishDate">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">歌手姓名</label>
            <div class="layui-input-block">
                <select name="singer.sid" lay-verify="required" id="updateSinger">

                </select>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript">
    function handleSearch(){
        layui.use(["form","table"],function(){
            var form = layui.form;
            var table = layui.table;
            var formData = form.val("search");
            var $ = layui.$;
            console.log(formData);

            table.reload("song",{
                url:"/music/song/showPageSong",
                where:{
                    "search":formData.search,
                }
            })
            $("#search").val(formData.search);

        })
    }
    function handleExport(){
        var form = layui.form;
        var formData = form.val("search");
        location.href = "/music/song/exportAll?search="+formData.search;
    }
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#date' //指定元素
        });
    });


    function handleOpenAdd(){
        layui.use(["layer","form"],function(){
            var table = layui.table;
            var layer = layui.layer;
            var $ = layui.$;
            var form = layui.form;
            layer.open({
                type:1,
                title:"添加",
                content:$("#addForm")
            });
            form.on("submit(add)",function(data){
                $.ajax({
                    url:"${pageContext.request.contextPath}/banner/add",
                    data:data.field,
                    type:"post",
                    dataType:"json",
                    success:function(r){
                        if (r.status == "success") {
                            layer.msg("添加成功",function(){
                                layer.closeAll();
                                table.reload("banner");
                            })
                        }else{
                            layer.msg(r.msg);
                        }
                    }
                })
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            })
        })
    }
    function handleRemoveAny(){
        layui.use(["table","layer"],function(){
            var table = layui.table;
            var layer = layui.layer;
            var $ = layui.$;
            //获取选中的行
            var checkStatus = table.checkStatus('song');
            console.log(checkStatus.data);//获取所有选中行的数据
            var ids = [];
            for(var i = 0; i < checkStatus.data.length; i++){
                ids[i] = checkStatus.data[i].id;
            }
            console.log(ids);
            if(ids.length == 0){
                layer.msg("请选中要删除的行");
            }else{
                //发起ajax请求

                $.ajax({
                    url:"/music/song/removeAny",
                    data:"ids="+ids,
                    type:"get",
                    dataType:"json",
                    success:function(r){
                        console.log(r);
                        if(r.status == "success"){
                            layer.msg("删除成功");
                            table.reload("song");
                        }else{
                            layer.msg(r.msg);
                        }
                    }
                })
            }
        })
    }


    layui.use(['upload','table','jquery'] ,function(){
        var upload = layui.upload;
        var $ = layui.jquery;
        var uploadInst2 = upload.render({
            elem: '#importFile'
            ,url: '/music/song/importFile' //上传接口
            ,field:'file'//后台接收的名字
            ,accept:'file'
            ,done: function(res){
                if(res.status=="success"){
                    layui.layer.msg("上传成功");
                    table.reload("song");
                }else{
                    layui.layer.msg(res.msg);
                }

            }
        });
        var uploadInst1 = upload.render({
            elem: '#uploadImg' //绑定元素
            ,url: '${pageContext.request.contextPath}/banner/uploadImg' //上传接口
            ,type:"post"
            ,field: "file"//设置上传的文件名
            ,done: function(res){
                console.log(res);
                //上传完毕回调
                if(res.status=="success"){
                    $("#fileName").html(res.name);
                    $("#imageUrl").val(res.path);
                    layui.layer.msg("上传成功");
                }else{
                    $("#fileName").html(res.msg);
                }

            }

        });
    });

    layui.use(["table","layer","form"],function(){
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.$;

        table.on("tool(test)",function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'detail'){ //查看
                //do somehing
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    // obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    // layer.close(index);
                    //向服务端发送删除指令

                    $.ajax({
                        url:"${pageContext.request.contextPath}/banner/remove",
                        data:"id="+obj.data.bannerId,
                        dataType:"json",
                        success:function(r){
                            if (r.status == "success") {
                                //如果响应正确
                                layer.close(index);
                                table.reload("banner");
                            }else{
                                layer.msg(r.msg);
                            }
                        }
                    })


                });


            } else if(layEvent === 'edit'){ //编辑
                //do something
                // alert(data);
                //同步更新缓存对应的值
                /*obj.update({
                    personId: '123',
                    personName:"xxx"
                    ,sex: 1,
                    birthday: new Date()
                });*/
                $.ajax({
                    url:"/music/song/showOne",
                    data:"id="+obj.data.id,
                    dataType:"json",
                    success:function(r){
                        console.log(r.song);
                        console.log(r.singers);
                        form.val("update",r.song);
                        var str = "";
                        for(var i=0;i<r.singers.length;i++){
                            if(r.singers[i].sid==r.song.singer.sid){
                                str+="<option selected value='"+r.singers[i].sid+"'>"+r.singers[i].sname+"</option>"
                            }else{
                                str+="<option value='"+r.singers[i].sid+"'>"+r.singers[i].sname+"</option>"
                            }
                        }
                        console.log(str);
                        var singer = $("#updateSinger");
                        singer.html(str);
                        form.render();
                        layer.open({
                            type:1,
                            title:"更新",
                            content:$("#updateForm"),
                            btn:["更新","取消"],
                            yes:function(index){
                                //获取表单中数据
                                var formData = form.val("update");
                                //发起ajax请求
                                $.ajax({
                                    url:"/music/song/update",
                                    data:formData,
                                    dataType:"json",
                                    success:function(r){
                                        if (r.status == "success") {
                                            layer.msg("更新成功",function(){
                                                layer.close(index);
                                                table.reload("song");
                                                // obj.update(formData);
                                            })
                                        }else{
                                            layer.msg(r.msg);
                                        }
                                    }
                                })
                            }
                        })
                    }
                })
            }
        })
    })
</script>
</body>
</html>